<template>
  <div class="left-container">
    <!-- 作业区域 -->
    <div class="work-area box">
      <ChartBox title="作业区域" height="100%">
        <WorkArea :data="workAreaList" :areaId="areaId"></WorkArea>
      </ChartBox>
    </div>
    <!--  人员设备   -->
    <div class="personnel box">
      <ChartBox title="人员设备" height="100%">
        <PersonEquipment
          :data="personEquipmentList"
          :areaId="areaId"
          :personEquipmentType="personEquipmentType"
        ></PersonEquipment>
      </ChartBox>
    </div>
  </div>
</template>
<script>
import ChartBox from "@/views/bigScreen/components/ChartBox/index.vue";
import WorkArea from "./WorkArea.vue";
import PersonEquipment from "./PersonEquipment.vue";

export default {
  name: "BigScreenLeft",
  components: {
    ChartBox,
    WorkArea,
    PersonEquipment,
  },
  props: {
    personEquipmentList: {
      type: Array,
      default: () => [],
    },
    workAreaList: {
      type: Array,
      default: () => [],
    },
    areaId: {
      type: [String,Number],
      default: "",
    },
    personEquipmentType: {
      type: [String,Number],
      default: "",
    },
  },
  data() {
    return {};
  },
  created() {
  },
  methods: {
  },
}
</script>

<style scoped lang="scss">
.left-container {
  height: 100%;
  position: relative;
  .work-area {
    height: 45%;
  }
  .personnel {
    height: 55%;
  }
}
</style>
